<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		#box {
			width: 466px;
			height: 700px;
			margin: 100px auto;
			display: flex;
			flex-direction: column;
		}

		p {
			font-size: 25px;
			text-align: center;
			margin-bottom: 50px;
		}

		#zh {
			width: 462px;
			height: 50px;
			margin-bottom: 20px;
			border-radius: 4px;
			border: 2px solid #ccc;
		}

		#mi {
			width: 462px;
			height: 50px;
			border-radius: 4px;
			border: 2px solid #ccc;
		}

		.scroll {
			margin-bottom: 30px;
			width: 466px;
			height: 50px;
			background: #ccc;
			position: relative;
			margin-top: 45px;
			border-radius: 4px;
		}

		.bar {
			width: 50px;
			height: 50px;
			background: #fff;
			position: absolute;
			top: px;
			left: 0;
			cursor: pointer;
			border: 1px solid #ccc;
			border-radius: 4px;
		}

		#qj {
			font-size: 25px;
			color: #ccc;
			text-align: center;
			line-height: 0px;
		}

		.mask {
			position: absolute;
			left: 0;
			top: 0;
			background: green;
			width: 0;
			height: 50px;
		}

		#dl {
			width: 466px;
			height: 50px;
			background: red;
			border: 2px solid #ccc;
			border-radius: 4px;
			margin-top: -30px;
			font-size: 20px;
			font-weight: 600;
			cursor: pointer;
		}

		#yz {
			width: 466px;
			height: 30px;
			margin-top: 20px;
			text-align: center;
			line-height: 50px;
		}

		a {
			font-size: 16px;
			color: blue;
			text-decoration: none;
			padding: 15px;
		}

		#pp {
			height: 14px;
			color: #ccc;
		}
	</style>
</head>

<body>

	<div id="box">
		<p>登录</p>
		<input type="text" name="" id="zh" value="82596"
			placeholder="&nbsp;&nbsp;&nbsp;&nbsp;手机&nbsp;&nbsp;/&nbsp;&nbsp;邮箱&nbsp;&nbsp;/&nbsp;&nbsp;用户名" /><br />
		<input type="password" name="" id="mi" value="82596" placeholder="&nbsp;&nbsp;&nbsp;&nbsp;密码" />
		<div class="scroll" id="scroll">
			<div class="bar" id="bar">
				<p id="qj">&gt;&gt;</p>
			</div>
			<div class="mask" id="mask"></div>
		</div>
		<p></p>
		<input type="button" name="" style="background:green;color: seashell;" id="dl" value="登录" />
		<div id="yz">
			<a href="">短信验证登录</a><span id="pp">|</span>
			<a href="reg.html">注册</a><span id="pp">|</span>
			<a href="">忘记密码</a>
		</div>
	</div>

	<script>
		var scroll = document.getElementById('scroll');
		var bar = document.getElementById('bar');
		var mask = document.getElementById('mask');
		var ptxt = document.getElementsByTagName('p')[0];
		var barleft = 0;
		bar.onmousedown = function (event) {
			var event = event || window.event;
			var leftVal = event.clientX - this.offsetLeft;
			var that = this;

			document.onmousemove = function (event) {
				var event = event || window.event;
				barleft = event.clientX - leftVal;
				if (barleft < 0)
					barleft = 0;
				else if (barleft > scroll.offsetWidth - bar.offsetWidth)
					barleft = scroll.offsetWidth - bar.offsetWidth;
				mask.style.width = barleft + 'px';
				that.style.left = barleft + "px";
				window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
			}

		}
		document.onmouseup = function () {
			document.onmousemove = null;
		}
	</script>
	<script src="../js/jquery-1.11.3.min.js"></script>
	<script>
		$('#dl').on('click', function () {
			let username = $('#zh').val()
			let password = $('#mi').val()

			$.ajax({
				url: "http://jx.xuzhixiang.top/ap/api/login.php",
				type: "get",
				data: {
					username, password
				}
			}).then(res => {
				console.log(res);
				alert(res.msg)
				if (res.code === 1) {
					localStorage.setItem('username',username)
					// localStorage.setItem('password',password)
					localStorage.setItem('uid',res.data.id)
					localStorage.setItem('token',res.data.token)
					
					location.href = '../../index.html'
				}
			})
		})

	</script>
</body>

</html>